// 引入react
import React, {PureComponent} from 'react';
// 引入核心grid组件
import ScGridTable from '../../../components/display/table/gridTableCore';
// 定义业务的接口对象
import { getUserList } from '../../../fetch/fetchApi';

class DemoTable extends PureComponent{
  constructor (props) {
    super(props);
    // 获取父组件传递的参数
    this.props = props;
  }

  compoentWillMount () {
    // 初始定义表格数据
    this.generateSchema();
  }

  // 表格列的定义
  generateSchema () {
    this.state = {
      tableConfig : {
        tableColumns : [
          {
            name: '用户名称',
            key: 'name',
            colType: 'textCol', // 固定列
            fix: 'left'
          }, {
            name: '用户电话',
            key: 'phone',
            colType: 'textCol'// 普通文字列
          }, {
            name: '用户邮箱',
            key: 'email',
            colType: 'tipCol' // 超出省略带提示的列
          },
          {
            name: '预览图片',
            key: 'fullURL',
            colType: 'thumbImage' // 图片列
          },
          {
            name: '操作',
            key: 'action',
            colType: 'action', // 操作列，可定义多种操作。
            actionMap: [
              {
                type: 'href',
                actionName: '操作角色',
                handler: (res) => {
                  this.dispathRole(res);
                }
              },
              {
                type: 'confirm',
                actionName: '确认操作',
                handler: (res) => {
                  this.dispathRole(res);
                }
              }
            ]
          }
        ],
        tableParam: {
          pageCount: 5
        },
        tableInfo: {
          hasRow: !1 // 是否显示checkbox

        },
        tableChange: () => {
          console.log('change');
        },
        dataApi: getUserList
      }
    }
  }

  // 自定义事件， 用户自行定义对应业务逻辑

  dispathRole (res) {
    console.log(res);
  }

  render () {
// 用户只需要传入接口对象和配置的列信息即可
    return <ScGridTable config={this.state.tableConfig}
    />;
  }

}

// 最后我们得到自定义的gridTable,放置到业务page中。
export default DemoTable;